<template>
    <div class="gray-bg">
	    <div class="row wrapper border-bottom white-bg page-heading">
	        <div class="col-lg-10 col-lg-offset-1">
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <router-link to="../../login"> <i class="fa fa-sign-out"></i> Log out </router-link>
                    </li>
                </ul>
	            <h2>新推广渠道</h2>
	            <ol class="breadcrumb">
                    <li>
                        <a> WeShare Partner </a>
                    </li>
                    <li>
                        <router-link to="./List"> 广告推广渠道 </router-link>
                    </li>
                    <li class="active">
                        <strong>新推广渠道</strong>
                    </li>
	            </ol>
	        </div>
	    </div>
		<div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>新推广渠道</h5>
                        </div>
                        <div class="ibox-content">
                        	<div class="row">
                        		<div class="form-group col-lg-6 col-lg-offset-3">
									<label>渠道名称 <span class="color-red">*</span></label>
									<input type="text" placeholder="请输入用于区分渠道的描述名称" class="form-control m-b" v-model='cname'>
								</div>
                        		<div class="form-group col-lg-6 col-lg-offset-3">
									<label>被推广应用Google Play地址 <span class="color-red">*</span></label>
									<input type="text" placeholder="例如：https://play.google.com/store/apps/details?id=com.weshare" class="form-control m-b" v-model='adurl'>
								</div>
                        		<div class="form-group col-lg-6 col-lg-offset-3">
									<label>选择被推广App使用的安装跟踪平台 <span class="color-red">*</span></label>
									<select class="form-control m-b" v-model='terrace'>
										<option value="Custom">Custom</option>
										<option value="Adjust">Adjust</option>
										<option value="AppsFlyer">AppsFlyer</option>
                                    </select>
                                </div>
                        		<div class="form-group col-lg-6 col-lg-offset-3">
									<label>选择推广目标国家 <span class="color-red">*</span></label>
									<select class="form-control m-b" v-model='country'>
										<option value="all">全部</option>
										<option value="美国">美国</option>
										<option value="英国">英国</option>
										<option value="巴西">巴西</option>
										<option value="印度">印度</option>
                                    </select>
								</div>
                        		<div class="form-group col-lg-6 col-lg-offset-3">
									<label>推广跟踪Impression回调URL <span class="color-red">*</span></label>
									<input type="text" placeholder="例如：https://ad.adjust.com/impression/weshare/id135342..." class="form-control m-b"  v-model='implurl'>
								</div>
                        		<div class="form-group col-lg-6 col-lg-offset-3">
									<label>推广跟踪Click回调URL <span class="color-red">*</span></label>
									<input type="text" placeholder="例如：https://ad.adjust.com/click/weshare/id135342..." class="form-control m-b" v-model='clickurl'>
								</div>

								<div class="form-group col-lg-6 col-lg-offset-3">
									<label class="control-label">计费方式 <span class="color-red">*</span></label>
								    <div>
								        <div class="radio">
								        	<label>
								        		<input type="radio" value="CPI" name="payway" v-model="payway">
								        		CPI
								        	</label>
								        </div>
								        <div class="radio">
								        	<label>
								        		<input type="radio" value="CPM" name="payway" v-model="payway">
								        		CPM
								        	</label>
								        </div>
								    </div>
								</div>

								<div class="form-group col-lg-6 col-lg-offset-3">
									<label class=" control-label">单日预算最大金额($) <span class="color-red">*</span></label>
									<br>
									<small class="color-red">预算不完全保证，因为广告停止投放后发生的潜在安装将会增加支出。</small>
                                    <div>
                                        <div class="input-group m-b">
                                        	<span class="input-group-addon">$</span>
                                        	<input type="number" class="form-control" v-model="priceDay">
                                        	<span class="input-group-addon">.00</span>
                                        </div>
                                    </div>
                                </div>

								<div class="form-group col-lg-6 col-lg-offset-3">
									<label class=" control-label">单次出价金额($) <span class="color-red">*</span></label>
									<br>
									<span class="color-red">
									对于CPI以具体产生单个安装的单次价格，对于CPM以每千次产生展示的价格，系统会针对不同的T1、T2、T3国家动态调整适配您的出价。
									</span>
                                    <div>
                                        <div class="input-group m-b">
                                        	<span class="input-group-addon">$</span>
                                        	<input type="number" class="form-control" v-model="priceSku">
                                        	<span class="input-group-addon">.00</span>
                                        </div>
                                    </div>
                                </div>


								<div class="ibox float-e-margins">
			                        <div class="ibox-content">
			                            <div class="text-center">
			                            	<a data-toggle="modal" class="btn btn-primary" v-on:click="ChannelPost">保存</a>
			                            </div>   
			                    	</div>
			                	</div>

							</div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</template>


<script>
import config from '../../../../config/config.js'
import toastr from '../../../../static/js/toastr.min'
export default {
  	name: 'ChannelPost',
  	data () {
    	return {
	    	// 渠道名称
	    	cname: '',
	    	// 被推广应用Google Play地址
	    	adurl: '',
	    	// 选择被推广App使用的安装跟踪平台
	    	terrace: '',
	    	// 选择推广目标国家
	    	country: '',
	    	// 推广跟踪Impression回调URL
	    	implurl: '',
	    	// 推广跟踪Click回调URL
	    	clickurl: '',
	    	// 计费方式
	    	payway: '',
	    	// 单日预算最大金额($)
	    	priceDay: '',
	    	// 单次出价金额($)
	    	priceSku: '',
    	}
  	},
  	beforeRouteLeave (to, from, next) {
  		console.log("beforeRouteUpdate")
  		next();
  	},
  	methods: {
  		ChannelPost () {
  			let vue = this;
  			// console.log(vue.cname);
  			// console.log(vue.adurl);
  			// console.log(vue.terrace);
  			// console.log(vue.country);
  			// console.log(vue.implurl);
  			// console.log(vue.clickurl);
  			// console.log(vue.payway);
  			// console.log(vue.priceDay);
  			// console.log(vue.priceSku);
  			// 必须入力check
  			if (!vue.cname || !vue.adurl || !vue.terrace || !vue.country || !vue.implurl || !vue.clickurl || !vue.payway || !vue.priceDay || !vue.priceSku) {
  				toastr.error("请填写完整信息");
  				return;

  			}

  			toastr.info("提交中...");
  			$.ajax({
  			    url:'http://' + config.URL + '/ad/addChannels',
  			    dataType:"jsonp",
  			    async: false, 
  			    processData:true,
  			    type:'get',
  			    data: {
					"cname": vue.cname,
					"adurl": vue.adurl,
					"terrace": vue.terrace,
					"country": vue.country,
					"implurl": vue.implurl,
					"clickurl": vue.clickurl,
					"payway": vue.payway,
					"priceDay": vue.priceDay,
					"priceSku": vue.priceSku,
					"userid": vue.$route.params.username
  			    },  
  			    jsonp:"callback",
  			    timeout: 5000,
  			    success:function(data, status){
  			        // console.log(status);
  			        // console.log(data);
  			        if (data.code == 1) {
	                    toastr.success("渠道数据提交成功");
	                    // setTimeout(vue.$router.push({ name: 'ChannelList', params: { username: vue.$route.params.username }}), 1500);
  			        	vue.$router.push({ name: 'ChannelList', params: { username: vue.$route.params.username }})
  			        } else {
		                toastr.error("请求出错，请稍后再试");
  			        }
  			    },
  			    error:function(XHR, textStatus, errorThrown){
  			        console.log('err');
                    toastr.error("请求出错，请稍后再试");
  			    }
  			});
  		}
  	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
